import React,{useState,useEffect} from 'react'
import * as echarts from 'echarts';

const EcharsTable=()=>{

    useEffect(()=>{

        async function EcharTwo(){
            await CharDataTwo()
        }

        EcharTwo()

    })

    const CharDataTwo = ()=>{

          var chartDomDate = document.getElementById('main-data');
          var myChartDate = echarts.init(chartDomDate);
          var optionData;
      
      
          setTimeout(function () {
      
            optionData = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true
                }]   
            }
        });
        
        optionData && myChartDate.setOption(optionData);
     }


    return (
        <div id="main-data" style={{width:500,height:500,marginBottom:50}}></div>    
    )

}

export default EcharsTable;